import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';
import data from './data.json';

const TableData = data.data.flatMap(item => Array(10000).fill(item)).map((i, index) => ({ ...i, province: `${i.province}-${index}` }))

registerAllModules();

const App = () => {
  return (
    <div className="ht-theme-main-dark-auto">
      <HotTable
        data={TableData}
        rowHeaders={true}
        colHeaders={true}
        navigableHeaders={true}
        tabNavigation={true}
        multiColumnSorting={true}
        headerClassName="htLeft"
        licenseKey="non-commercial-and-evaluation"
      >
        <HotColumn title="province" data="province" width="100"></HotColumn>
        <HotColumn title="city" data="city" width="170"></HotColumn>
        <HotColumn title="type" data="type" width="100"></HotColumn>
        <HotColumn title="price" data="price" width="100"></HotColumn>
      </HotTable>
    </div>
  );
};

export default App;